<template>
<div data-page="login">
  <el-container class="bg-login">
    <el-header height="30px" class="login-header">{{$store.state.loginhead}}</el-header>
    <el-main>
      <div class="login-center">
        <h3 class="text-center">用户登录</h3>
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="60px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              type="text"
              placeholder="请输入用户名"
              v-model="ruleForm2.userName"
              autocomplete="off"
            >
              <i slot="prefix" class="el-input__icon iconfont icon-wode" style="font-size:25px"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pass">
            <el-input
              type="password"
              v-model="ruleForm2.pass"
              placeholder="请输入密码"
              autocomplete="off"
            >
              <i slot="prefix" class="el-input__icon iconfont icon-linshimima" style="font-size:25px"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="w100" @click="submitForm('ruleForm2')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-main>
    <el-footer class>{{$store.state.footer}}</el-footer>
  </el-container>
  </div>
</template>
<script>
import Vue from "vue";
import { Button } from "element-ui";
Vue.use(Button);
export default {
  name: "login",
  components: {},
  data() {
    var checkuserName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        if (value.length > 12) {
          return callback(new Error("请输入12以内的名字"));
        } else {
          callback();
        }
      }
    };
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入密码"));
      } else {
        var patrn = /^(\w){6,20}$/;
        if (!patrn.exec(value)) {
          callback(new Error("请输入6-20个字母、数字"));
        } else {
          callback();
        }
      }
    };
    return {
      ruleForm2: {
        pass: "",
        userName: ""
      },
      rules2: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        userName: [{ validator: checkuserName, trigger: "blur" }]
      },
      labelPosition: "left"
    };
  },
  created() {},
  mounted() {
    if (window.innerWidth < 1000) {
      this.labelPosition = "top";
    }
  },
  methods: {
    submitForm(formName) {
      let _this=this;
      _this.$refs[formName].validate(valid => {
        if (valid) {
             _this.$router.push({name: 'home'});
            // _this.$router.push({name: '/home'});
        } else {
          return false;
        }
      });
    }
  }
};
</script>
<style lang='less'>
[data-page="login"] {
.text-center {
  text-align: center;
}
.login-header {
  height: auto;
  font-size: 2rem;
  color: #f2f0f0;
  .text-center;
}
.w100 {
  width: 100%;
}
.bg-login {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #38f;
  padding: 0 20%;
  box-sizing: border-box;
  padding-top: 15%;
}
.login-center {
  margin: 0 auto;
  width: 30rem;
  background-color: #ffffff;
  padding: 1.5rem 2rem;
  box-sizing: border-box;
}
@media (max-width: 800px) {
  .bg-login {
    padding: 0;
    padding-top: 20%;
  }
  .login-center {
    width: 100%;
  }
  .login-header {
    font-size: 2.7rem;
  }
}
}
</style>
